<template>
    <div> <el-dialog v-model="dialogVisible" :title="title" width="500" :before-close="handleClose">
            <div style="text-align: center;">
                <img v-if="rowobj.fileCategory == 3" :src="src" alt="">
                <div v-if="rowobj.fileCategory == 1" style="width: 100%;height:200px" ref="videoref"></div>
                <highlightjs v-if="rowobj.fileCategory == 5" autodetect :code="codeHtml" />
                <!-- <video v-if="rowobj.fileType == 1" :src="src"></video> -->
            </div>
        </el-dialog></div>
</template>
<script setup>
import { ref } from 'vue';
import DPlayer from "dplayer";
import service from '@/utils/Request';
const dialogVisible = ref(false)
const title = ref("")
const videoref = ref(null)
const blogResult = ref(null)
const rowobj = ref({})
const src = ref("")
const codeHtml = ref("")
const open = async (row) => {
    rowobj.value = row
    title.value = row.fileName
    dialogVisible.value = true
    if (row.fileCategory == 3) {
        src.value = "/api/file/getFile/" + row.fileId
    } else if (row.fileCategory == 1) {
        getplayer(row)
    } else if (row.fileCategory == 5) {
        const res = await service.post("/file/getFile/" + row.fileId, { type: 'blob' });
        console.log(typeof (res))
        const encoder = new TextEncoder();
        const unit8Array = encoder.encode(res);
        const blob = new Blob([unit8Array], { type: "text/plain" })
        console.log(blob, "blob")
        setTimeout(() => {
            blogResult.value = blob;

            const reader = new FileReader();
            reader.onload = () => {
                let txt = reader.result;
                codeHtml.value = txt;
            }
            reader.readAsText(blogResult.value, "utf8")
        })

    }
}
const getplayer = (row) => {
    setTimeout(() => {
        const dp = new DPlayer({
            element: videoref.value,
            theme: "#b7daff",
            screenshot: true,
            video: {
                url: "/api/file/ts/getVideoInfo/" + row.fileId,
                type: "customHls",
                customType: {
                    customHls: function (video, player) {
                        const hls = new Hls();
                        hls.loadSource(video.src)
                        hls.attachMedia(video)
                    }
                }
            }

        })
    }, 100)
}
defineExpose({
    open
})
</script>